<script>
import {createProps} from '@/utils';
import FieldDelegate from '@/components/hhd/design/FormEngine/FieldDelegate.vue';
import FormEngineUtils from '@/components/hhd/design/FormEngine/FormEngineUtils';
import AddNewButton from '@/components/hhd/design/FormField/subForm/AddNewButton.vue';
import './style.css';
import CopyButton from '@/components/hhd/design/FormField/subForm/CopyButton.vue';
import DeleteButton from '@/components/hhd/design/FormField/subForm/DeleteButton.vue';
import DeleteAllButton from '@/components/hhd/design/FormField/subForm/DeleteAllButton.vue';
import MoveUpButton from '@/components/hhd/design/FormField/subForm/MoveUpButton.vue';
import MoveDownButton from '@/components/hhd/design/FormField/subForm/MoveDownButton.vue';

export default {
  name: 'SubForm',
  props: {
    config: createProps(Object, () => undefined),
    context: createProps(Object, () => undefined),
    dataSource: createProps(Array, () => []),
  },
  data() {
    return {
      selectedRowId: undefined
    };
  },
  render(h) {
    if (!this.config || !this.context || !this.context.formModel || !this.dataSource) return undefined;
    return h('div', {
      class: 'sub-form-table-layout',
    }, this.renderTable());
  },
  methods: {
    renderTable() {
      return [this.$createElement('table', [
        this.createColGroup(),
        this.createSubFormButtonContainer(),
        ...this.renderHeader(),
        ...this.renderBody(),
        ...this.renderFooter(),
      ])];
    },
    createSubFormButtonContainer() {
      return this.$createElement('tr', {
        style: {
          height: this.config.barContainer.barContainerHeight
        }
      }, [
        this.$createElement('td', {
          attrs: {
            colspan: this.config.colWidth.length
          },
          style: this.config.barContainer.style
        }, this.renderSubFormButtons())
      ]);
    },
    renderSubFormButtons() {
      let subForm = this.context.formDefinition.subForms.find(s => s.id === this.config.subFormId);
      let subFormActions = this.context.action && this.context.action.subFormActions || [];
      let action = subFormActions.find(action => action.subFormId === this.config.subFormId);
      return [
        action.addRow && this.renderButton(AddNewButton, subForm) || undefined,
        action.copyRow && this.renderButton(CopyButton, subForm) || undefined,
        action.removeRow && this.renderButton(DeleteButton, subForm) || undefined,
        action.clearRow && this.renderButton(DeleteAllButton, subForm) || undefined,
        action.moveUp && this.renderButton(MoveUpButton, subForm) || undefined,
        action.moveDown && this.renderButton(MoveDownButton, subForm) || undefined,
      ];
    },
    renderButton(comp, subForm) {
      return this.$createElement(comp, {
        props: {
          config: this.config,
          context: this.context,
          dataSource: this.dataSource,
          subFormDefinition: subForm,
          selectedRowId: this.selectedRowId,
        }
      });
    },
    createColGroup() {
      return this.$createElement('colgroup', this.config.colWidth.map(width => this.$createElement('col', {style: {width}})));
    },
    renderHeader() {
      let header = this.config.header, headerHeight = this.config.headerHeight;
      return this.renderRows(header, headerHeight, this.context.formModel);
    },
    renderRows(rows, heights, model, props = {}, rowIndex) {
      let res = [];
      for (let i = 0; i < rows.length; i++) {
        let row = rows[i];
        let cells = [];
        row.forEach(cell => {
          cells.push(this.createCell(cell, model, rowIndex));
        });
        res.push(this.$createElement('tr', {style: {height: heights[i]}, ...props}, cells));
      }
      return res;
    },
    createCell(cell, model, rowIndex) {
      let fieldConfig = cell.fieldConfig;
      if (fieldConfig) {
        fieldConfig = FormEngineUtils.getFieldConfigById(fieldConfig.fieldId, this.context.formDefinition);
        return this.$createElement('td', this.createCellProps(cell), [
          this.$createElement(FieldDelegate, {
            props: {
              fieldConfig,
              context: this.context,
              formModel: model,
              rowIndex
            }
          }),
        ]);
      }
      return this.$createElement('td', {
        ...this.createCellProps(cell),
        domProps: {
          innerHTML: cell.content || "",
        },
      });
    },
    createCellProps(cell) {
      return {
        attrs: {
          rowspan: cell.rowspan,
          colspan: cell.colspan
        },
        style: cell.style
      };
    },
    renderBody() {
      let body = this.config.body, bodyHeight = this.config.bodyHeight, res = [], dataSource = this.dataSource || [];
      let index = 0;
      dataSource.forEach(model => {
        res.push(this.renderRows(body, bodyHeight, model, {
          class: {
            'selected-row': this.selectedRowId === model.id,
          },
          on: {
            click: () => {
              this.selectedRowId = model.id;
            },
          }
        }, index++));
      });
      return res;
    },
    renderFooter() {
      let footer = this.config.footer, footerHeight = this.config.footerHeight;
      return this.renderRows(footer, footerHeight, this.context.formModel);
    },
  }
};
</script>